import React, { useState } from 'react';
import { LonglistCutRenderer } from '../../components/LonglistCutRenderer';
import { Link } from 'umi';

export default function LonglistTest() {
  const item = { name: '张三', age: 18 };
  const longList = new Array(100).fill(item);
  const [list, setList] = useState(longList);

  return (
    <React.Fragment>
      <br />
      <Link to="/home">带回调的setState测试</Link>
      <br />
      <Link to="/longListRender">长列表切片组件测试</Link>
      <br />
      <Link to="/longListTest">长列表切片功能演示</Link>

      <h1>测试用例01</h1>
      <h3>使用说明: 可以直接将列表渲染逻辑包裹在组件里 实现切片加载列表</h3>
      <br />
      <h3>内部可任意嵌套html结构</h3>
      <input type="text" />

      <LonglistCutRenderer speed={5}>
        {list.map((item, index) => {
          return (
            <div key={index + '0'}>
              姓名:{item.name} age:{item.age}
            </div>
          );
        })}
      </LonglistCutRenderer>

      {/* <h1>测试用例02</h1>
    <h3>只能在内部写一个map逻辑</h3>
    <LonglistCutRender>
      {list.map((item, index) => {
        return (<li key={index + '0'}><div>{item + '嵌套div'}</div></li>)
      })}
      {list.map((item, index) => {
        return (<li key={index + '1'}>11111</li>)
      })}
    </LonglistCutRender> */}
    </React.Fragment>
  );
}
